目录

1.整体效果

2.顶部导航条

 3. 头部logo，中间和左侧导航条，右侧搜索框

4.CSS中间轮播图

5.右侧工具栏

 6.底部广告部分

 7.favico.ico图标

对于采用html,css制作静态界面，我的理解是只要你脑海里有大致框架的思路和定位的感觉就不会太难，分为一块一块来写，最好养成根据文档结构一层一层递进的写选择器的习惯，这样不会乱，在后期修改的时候也方便查找，前端就是网页的美容师，就看你如何去给他动刀子了。

整个页面大致分为几个板块：

                         顶部导航条；

                         头部logo，中间和左侧导航条，右侧搜索框；

                         CSS手动轮播图；

                         右侧工具栏；

                         底部广告部分。

在准备期间先将公共css样式写好,设置body最小值，以防止溢出容器：

经典的导航条练习，浮动之后利用伪类和过渡效果设置下拉二维码和购物车下拉栏的位置，并给其设置层级以防止被别的元素覆盖。（因为二维码会被和谐，所以这里打了码）

效果图：

html代码:

 css代码：

开启定位使鼠标悬停logo时移动并通过设置悬停时的状态时logo在点击时变小。导航条下拉栏内容最好用js去实现，这里就不展示了。在真实的小米官网页面中中间导航条有一个隐藏元素“全部商品”它是连接着左侧导航条，所以这里将它们分到一个块里。

效果视频：

QQ视频20220630233516

html代码：

css代码：

实现原理：利用 css3 中 input:checked 和 + ～选择器实现。

虽然没有js的方便和交互性，但是也是一种自我锻炼。

效果：

html代码：

css代码：

开启固定定位将工具栏固定在右侧，同样利用伪类设置弹出的二维码。（因为二维码会被和谐，所以这里打码）

效果：

 html代码：

 css代码：

这里正常的浮动然后定位去做没什么好说的，为了省事左边的边框里我使用的是图标字体，想吐槽以下的是，左边那个只有左上边框没有右边框，一开始挺不理解这种设计的我觉得不好看，后来试了下颜色是和字体差不多的灰色还是挺好看的，小米的前端设计师，我承认是我之前说话太大声了。

 效果：

html代码：

 css代码：

最后收尾要设置网站的图标（在标题栏和收藏栏）

   -网站图片一般都存储在网站的根目录下，名字一般都叫做 favicon.ico

效果：

然后就是完结撒花！！！！！✿✿ヽ(°▽°)ノ✿